@import './variables.scss';
@import './mixin.scss';

body {
  font-size: $font-size-small-x;
  margin: 0;
  font-family: $baseFontFamily;
  background-color: $layout-bg-color;
}
a:hover {
  color: $main-color;
}

.content-wrapper {
  @include container($page-content-width)
}

>.el-scrollbar>.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

header {
  .header-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    .header-wrapper {
      @include container($page-content-width);
    }
    .header-inner {
      height: $navbar-height;
      display: flex;
      align-items: center;
      .logo-info {
        width: $logo-width;
        .logo-img {
          display: block;
          height: $logo-height;
          background-size: cover;
          width: $logo-width;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .user-info {
        width: $user-info-width;
      }
      .navbar {
        width: calc(100% - #{ $logo-width } - #{ $user-info-width } - 30px);
        margin: 0 10px 0 20px;
        .el-menu.el-menu--horizontal {
          border-bottom: 0;
          > .el-submenu {
            .el-submenu__title {
              padding: 0;
              margin: 0 20px;
              display: flex;
              align-items: center;
              border-bottom: 0;
              span {
                display: block;
                &:hover {
                  border-bottom: 2px solid $main-color;
                  border-bottom-color: $main-color !important;
                  transition: all 0.2s;
                  color: $main-color;
                }
              }
            }
            &.is-active {
              .el-submenu__title {
                color: $main-color;
                border-bottom: 0;
                span {
                  border-bottom: 2px solid $main-color;
                }
              }
            }
            .el-menu-item-group {
              .el-menu-item {
                a {
                  color: #303133;
                  display: block;
                }
                &.is-active a, &:hover a {
                  color: $main-color;
                }
              }
            }
          }
          > .el-menu-item {
            padding: 0;
            margin: 0 20px;
            &:hover {
              border-bottom: 2px solid $main-color;
              border-bottom-color: $main-color !important;
              transition: all 0.3s;
              color: $main-color;
            }
          }
        }
      }
    }
  }
}

.page-container {
  position: relative;
  .activity-components-container {
    @include container($content-width);
    min-height: calc(100vh - #{ $footer-height } - #{ $navbar-height } - 40px);
    background-color: #fff;
    margin: 20px auto;
    padding: 15px
  }
}
